<template>
  <page-wrap stay-still :bgColor="topBg" :hideNav="true" :showTop="false">
    <view class="report">
      <view class="top" :style="{ 'padding-top': topHeight + 'px' }">
        <view class="page-title">消息</view>
      </view>
      <view class="box-bg">
        <text class="icon icon-search" @click="tolower = false"></text>
        <view class="input-view">
          <u-input
            v-model="keyword"
            class="topSearch"
            :class="keyword ? '' : 'left_icon'"
            placeholder="搜索用户"
            shape="circle"
            :border="false"
            clearable
            @focus="isSearched = false"
          ></u-input>
        </view>
        <view
          v-if="keyword"
          class="btn btn-primary btn-search"
          @click="handleSearchClick"
          >搜索</view
        >
      </view>
    </view>
    <view class="message" v-if="personId">
      <view class="msg-list" v-if="!showLoading">
        <uni-swipe-action ref="msgAction">
          <uni-swipe-action-item
            v-for="(item, index) in msgList"
            :key="item.conversationID"
            :right-options="options"
            @click="(option) => actionClick(index, option.index)"
            @change="actionChange"
          >
            <view class="msg-item" @click="handleDetail(item, index)">
              <view class="item-avatar">
                <image
                  :src="item.userProfile.avatar || defaultAvatar"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="item-info">
                <view class="info-title">
                  <!-- 在这里加体验按钮标识 -->
                  <view class="name"
                    >{{ item.userProfile && item.userProfile.nick }}
                    <view
                      class="experience"
                      v-if="editionTypeList[index].editionType == 20"
                      >体验</view
                    >
                  </view>
                  <text class="time">{{ item.displayTime }}</text>
                </view>
                <view class="info-cont">{{ item.lastMsg }}</view>
              </view>
              <u-badge
                type="error"
                :offset="[88, 36]"
                :count="item.unreadCount"
              >
              </u-badge>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>

      <view class="loading" v-if="showLoading">
        <u-loading mode="flower" :show="showLoading"></u-loading>
      </view>
      <view
        class="empty"
        v-if="
          !msgList.length &&
          !msgTopList.length &&
          !showLoading
        "
      >
        <image :src="emptyImg" mode="" class="empty-img" />
        <view class="empty-title">
          <text>暂无沟通消息</text>
        </view>
        <view v-if="isCompany" class="empty-sub">
          <text>主动沟通，人才多入职快</text>
          <view>
            <u-button type="primary" class="btn-person" @click="toCompanySearch"
              >找人才聊一聊</u-button
            >
          </view>
        </view>
      </view>
    </view>
    <view class="need-login" v-else>
      <image :src="emptyImg" mode="" class="empty-img" />
      <view>
        <u-button type="primary" class="btn-login" @click="toLogin"
          >点击登录</u-button
        >
      </view>
    </view>
    <!-- 更新公告弹窗 -->
    <u-modal
      v-model="updateBox"
      :content-style="{ 'word-break': 'break-all' }"
      title="更新公告"
    >
      <view class="slot-content">
        <text>{{ updateContent }}</text>
      </view>
    </u-modal>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
    <!-- 大弹窗 -->
    <!-- <ActPromotion
      :show="showActPromotion"
      :backgroundSrc="alertGoods.goodsPic"
      @close="closeAlert"
      @next="clickAlert"
    ></ActPromotion> -->
  </page-wrap>
</template>

<script>
import { formatTimeFlex, httpToHttps } from "@/utils/handle";
import IMEventHandler from "@/utils/im";
import ShareMixin from "@/mixins/share";
import LoginMixin from "@/mixins/login.js";
import LoginDialog from "@/components/LoginDialog";
import { serviceRole } from "@/api/modules/message.js";
import { getZhituNotice, addBuryingPoint, getToastProId } from "@/api/modules/career";
import ActPromotion from "../../components/activities/activitiePromotion.vue";
import {
  consultantInfo,
  getPersonChatEditionStatus,
} from "@/api/modules/career";

export default {
  components: {
    LoginDialog,
    ActPromotion,
  },
  mixins: [ShareMixin, LoginMixin],
  data() {
    return {
      newChatId:'',
      updateBox: false,
      updateContent: "",
      editionTypeList: [],
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      consultantInfo: null,
      topHeight: getApp().globalData.topHeight,
      defaultAvatar: this.$imgBase + "avatar.png",
      msgList: [],
      msgTopList: [],
      isConnect: false,
      topBg: `linear-gradient(360deg, #f7f8fa 0%, #ffddcc 100%)`,
      showLoading: true,
      emptyImg: this.$imgBaseSelf + "message/empty.png",
      isCompany: uni.getStorageSync("login-status") == "company",
      retryInit: true,
      options: [
        {
          text: "置顶",
          style: {
            fontSize: "14px",
            backgroundColor: "#D2D2D2",
          },
        },
        {
          text: "删除",
          style: {
            fontSize: "14px",
            backgroundColor: "#E45F54",
          },
        },
      ],
      topOptions: [
        {
          text: "取消置顶",
          style: {
            fontSize: "14px",
            backgroundColor: "#D2D2D2",
          },
        },
        {
          text: "删除",
          style: {
            fontSize: "14px",
            backgroundColor: "#E45F54",
          },
        },
      ],
      adviser: [],
      adviserUnreadMsgCount: 0,
      personUnreadMsgCount: 0,
      sharePath: "/pages/message/index",
      shareTitle: "消息 - " + this.$selfName, // 分享自定义标题
      keyword: "",
      isSearched: false,
      storageMsgList: [],
      showActPromotion: false,
      buryingPointId: "",
      cardType: "",
      alertGoods: {
        goodsPic:
        this.$imgBaseSelf + "career/positionDictionary/bannerAlert_699.png",//
        goodsId: "128317245100125",
      },
      sendText: '测试消息',
    };
  },
  watch: {
    keyword(val) {
      if (!val) {
        this.msgList = this.storageMsgList;
      }
    },
  },
  created() {
    if (!this.personId) return;
    if (this.isCompany && !this.companyId) {
      this.showLoading = false;
      return;
    }
    this.getServiceRole();
    this.$bus.$on("UPDATE_CONVERSATION", this.handleConversationList);
    this.$bus.$on("LOGIN_ERROR", this.imLoginError);
  },
  beforeDestroy() {
    this.$bus.$off("UPDATE_CONVERSATION");
    this.$bus.$off("LOGIN_ERROR");
  },
  onShow() {
    this.keyword = "";
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.isCompany = uni.getStorageSync("login-status") == "company";
    this.companyId = uni.getStorageSync("company-id");
    // this.showAIAlert();
    // this.getAlertToastProId();

    if (!this.personId) {
      this.showLoading = false;
      return;
    }
    if (this.isCompany && !this.companyId) {
      this.showLoading = false;
      return;
    }

    let tabBarList =
      getApp().globalData.loginStatus === "company"
        ? getApp().globalData.companyTabs
        : getApp().globalData.personTabs;
    getApp().globalData.tabBarList = tabBarList;
    this.$bus.$emit("NEED_UPDATE_CONVERSATION");
    this.handleInit();
  },
  
  onLoad() {
    //如果登录的是顾问那就更新一下顾问在极光的的名字
    if (uni.getStorageSync("login-status") === "consultant") {
      //只执行一次哦
      if (this.consultantInfo) return;
      this.consultantInfoFn();
      //获取更新公告
      this.handleNotice();
    }
  },
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    //获取更新公告
    handleNotice() {
      getZhituNotice({ platform: 3, cardType: 0 })
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.updateContent = res.data.content || res.data.description || "";
            let id = uni.getStorageSync("consultantUpdateId") || 0;
            let currentTime = new Date().getTime();
            let publishTime =
              new Date(res.data.createTime).getTime() + 3 * 24 * 3600 * 1000;
            //三天内发的，并且ID更大，才弹出
            if (currentTime < publishTime && id < res.data.id) {
              this.updateBox = true;
              uni.setStorageSync("consultantUpdateId", res.data.id);
            }
          } else {
          }
        })
        .catch((err) => {});
    },
    handleSearchClick() {
      if (this.keyword) {
        this.isSearched = true;
        this.msgList = this.storageMsgList.filter(
          (item) => item.userProfile.nick.indexOf(this.keyword) > -1
        );
      }
    },
    consultantInfoFn() {
      const params = {
        consultantId: parseInt(this.personId),
      };
      consultantInfo(params).then((res) => {
        if (res.code == 200) {
          this.consultantInfo = res.data;
          const app = getApp();
          var isIMLogin = app.globalData.tim && app.globalData.tim.getLoginUser();
          const personName = res.data.iname;
          const consultantId = res.data.consultantId + "_consultant";
          if (isIMLogin) {
            app.globalData.tim.updateSelfInfo({
              username: consultantId, // 用户的唯一标识
              nickname: personName,
            });
            app.globalData.tim.updateSelfAvatar({
              avatar: res.data.pic,
            });
          }
        }
      });
    },
    handleToXiaolan() {
      uni.navigateTo({ url: "/pagesSub/elanwBot/index" });
    },
    handleInit() {
      let chat = getApp().globalData.tim;
      var isLogin = chat && chat.getLoginUser();
      if (isLogin) {
        this.handleConversationList();
      } else {
        new IMEventHandler(() => {
          uni.hideLoading();
        });
        // setTimeout(() => {
        //   uni.hideLoading();
        //   if (!this.isConnect) {
        //     chat && chat.logout();
        //     this.$nextTick(() => {
        //       chat = null;
        //       if (this.retryInit) this.handleInit();
        //     });
        //   }
        // }, 10000);
      }
    },
    actionClick(index, index1) {
      let item = this.msgList[index];
      this.action(item, index1, true);
    },
    topActionClick(index, index1) {
      let item = this.msgTopList[index];
      this.action(item, index1, false);
    },
    action(item, index1, isTop) {
      if (index1 == 1) {
        this.handleDelete(item);
      } else {
        this.handleTop(item, isTop);
      }
    },
    handleDetail(item) {
      //在登录状态等于顾问的时候,直接进入新聊天页面，但是有问题，所以不要从这里进入了
      if (
        uni.getStorageSync("login-status") === "consultant" ||
        item.userProfile.userID.indexOf("_consultant") > -1
      ) {
        uni.setStorageSync("consultantInfo", {
          iname: item.nickName,
          avatar: item.avatar, //message列表没有头像
        });
        let url = "/pagesSub/message/newChat/index?chatId=" + item.userProfile.userID;
        if (item.userProfile.userID.indexOf("_consultant") > -1) {
          url += "&isZhituUser=1";
        }
        uni.navigateTo({
          url,
        });
        return;
      }

      this.personUnreadMsgCount -= item.unreadCount;
      uni.navigateTo({
        url: "/pagesSub/message/chat/index?chatId=" + item.userProfile.userID + '&conversationID=' + item.conversationID,
      });
    },
    async getPersonChatEditionStatus(personIdList) {
      const params = {
        personIdList: personIdList,
        appointmentStatus: 20,
      };
      const res = await getPersonChatEditionStatus(params);
      if (res.code == 200) {
        this.editionTypeList = res.data;
      }
    },
    handleConversationList() {
      this.personUnreadMsgCount = 0;
      this.adviserUnreadMsgCount = 0;
      this.isConnect = true;
      let showConversationList = JSON.parse(
        JSON.stringify(getApp().globalData.conversationList)
      );
      let tempList = [];
      showConversationList.forEach((ele) => {
        // 最后聊天时间
        ele.displayTime = formatTimeFlex((ele.lastMessage.lastTime*1000));
        ele.show = false;
        ele.lastMsg = ele.lastMessage.messageForShow;
        ele.userProfile.avatar = httpToHttps(ele.userProfile.avatar);
        // 过滤顾问
        if (this.isAdviser(ele)) {
          // if (this.isAdviser(ele) || ele.username.indexOf("consultant") > -1) {
          return;
        }

        if (ele.unreadCount > 0) {
          // this.updateConversation(
          //   ele.username,
          //   true
          // );

          this.personUnreadMsgCount += ele.unreadCount;
        }
        tempList.push(ele);
      });
      this.msgList = tempList;
      this.storageMsgList = tempList;
      let msgListPersonId = []; // 定义一个空数组用于存放msgList里面的name也就是personId 用于下面接口的参数
      this.msgList.forEach((item) => {
        msgListPersonId.push(item.name);
        item.editionType = 0;
      });
      // this.getPersonChatEditionStatus(msgListPersonId);
      uni.hideLoading();
      this.showLoading = false;

      this.sortAdviser();
    },
    imLoginError(data) {
      if (data && data.code == 880103) {
        this.retryInit = false;
        this.showLoading = false;
      }
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.msgList[index].show = true;
      this.msgList.map((val, idx) => {
        if (index != idx) this.msgList[idx].show = false;
      });
      this.msgTopList.forEach((val, idx) => {
        val.show = false;
      });
    },
    topOpen(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.msgTopList[index].show = true;
      this.msgTopList.map((val, idx) => {
        if (index != idx) this.msgTopList[idx].show = false;
      });
      this.msgList.forEach((val, idx) => {
        val.show = false;
      });
    },
    handleTop(item, isTop) {
      const username = item.username;
      // let extras = Object.assign(item.extras, { isTop });
      // this.updateConversation(username);
    },
    handleDelete(item) {
      const username = item.username;
      // let extras = Object.assign(item.extras, { isDelete: true });
      // this.updateConversation(username);

      let chat = getApp().globalData.tim;
      // 将某会话下所有未读消息已读上报
      let promise = chat.setMessageRead({conversationID: this.conversationID});
      promise.then(function(imResponse) {
        // 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
      }).catch(function(imError) {
        // 已读上报失败
        console.warn('setMessageRead error:', imError);
      });

      // getApp().globalData.tim.current_conversation = "";
    },
    updateConversation(username, notRefresh) {
      //extras 老的数据会被覆盖
      // getApp().globalData.tim.updateConversation({
      //   username: username,
      // });
      if (notRefresh) return;
      this.$bus.$emit("NEED_UPDATE_CONVERSATION");
    },
    topActionChange(e) {
      if (e == "right") {
        this.$refs.msgAction.closeAll();
      }
    },
    actionChange(e) {
      if (e == "right") {
        this.$refs.msgTopAction.closeAll();
      }
    },
    toLogin() {
      // this.handleLoginPage();
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.isCompany = uni.getStorageSync("login-status") == "company";
      this.companyId = uni.getStorageSync("company-id");
      if (this.isCompany && !this.companyId) {
        this.showLoading = false;
      } else {
        this.$bus.$on("UPDATE_CONVERSATION", this.handleConversationList);
        this.$bus.$on("LOGIN_ERROR", this.imLoginError);
        let tabBarList =
          getApp().globalData.loginStatus === "company"
            ? getApp().globalData.companyTabs
            : getApp().globalData.personTabs;
        getApp().globalData.tabBarList = tabBarList;
        this.$bus.$emit("NEED_UPDATE_CONVERSATION");
        this.handleInit();
      }
    },
    getServiceRole() {
      const params = {
        companyId: this.companyId,
        type: 1,
        personId: this.personId,
      };
      serviceRole(params).then((res) => {
        if (res.code == 200) {
          this.adviser = res.data || [];
          this.handleConversationList();
        }
      });
    },
    isAdviser(item) {
      // 过滤顾问
      if (this.adviser.length) {
        for (let i = 0; i < this.adviser.length; i++) {
          if (this.adviser[i].username == item.name) {
            this.adviser[i].unreadCount = item.unreadCount;
            this.adviser[i].mtime = item.mtime;
            this.adviser[i].displayTime = item.displayTime;
            this.adviser[i].lastMsg = item.lastMsg;
            this.adviserUnreadMsgCount += item.unreadCount;
            return true;
          }
        }
      }
      return false;
    },
    toCompanySearch() {
      uni.navigateToMiniProgram({
        appId: "wx384a7e29f79f2fb6",
        path: "pagesSub/company/companySearch/index",
        success(res) {},
        fail(err) {},
      });
      // uni.navigateTo({
      //   url: "/pagesSub/company/companySearch/index",
      // });
    },
    handleAdviser(item) {
      this.adviserUnreadMsgCount -= item.unreadCount;
      getApp().globalData.adviser = item;
      uni.navigateTo({
        url:
          "/pagesSub/message/chat/index?chatId=" +
          item.username +
          "&isAdviser=1",
      });
    },
    sortAdviser() {
      this.adviser.sort((a, b) => {
        if (a.mtime > b.mtime) {
          return -1; // a在b之前
        } else if (a.mtime < b.mtime) {
          return 1; // a在b之后
        } else {
          return 0; // 相等
        }
      });
    },
    getAlertToastProId() {
      getToastProId().then((res) => {
        if (res.data) {
          console.log("---getAlertToastProId-------->", res.data);
          this.alertGoods = res.data;
        }
      });
    },

    // ====BEGIN==== AI面评推广相关 ======
    // ========

  //   showAIAlert() {
  //     let that = this;
  //     // 每次打开小程序只显示1次（改为每天弹一次）
  //     if (!this.showedPromotionAlert) {
  //       this.showedPromotionAlert = true;
  //       var nowTime = new Date();
  //       uni.getStorage({
  //         key: "userDidClickActCollegeAlertTime",
  //         success: function (res) {
  //           var localStorageTime = res.data;
  //           if (
  //             nowTime.getFullYear() != localStorageTime.getFullYear() ||
  //             nowTime.getMonth() != localStorageTime.getMonth() ||
  //             nowTime.getDay() != localStorageTime.getDay()
  //           ) {
  //             //年月日不同
  //             console.log(
  //               "------userDidClickActCollegeAlertTime---success-- > 1天-->",
  //               nowTime,
  //               localStorageTime
  //             );
  //             that.showActPromotion = true;
  //           } else {
  //             console.log(
  //               "------userDidClickActCollegeAlertTime---success-- < 1天-->",
  //               nowTime,
  //               localStorageTime
  //             );
  //             that.showActPromotion = false;
  //           }
  //         },
  //         fail: function () {
  //           console.log(
  //             "------userDidClickActCollegeAlertTime----fail--->",
  //             nowTime
  //           );
  //           that.showActPromotion = true;
  //         },
  //       });
  //     }
  //   },
    
  //   clickNext() {
  //     this.addBuryingPointFn(20087, "", "", "", "");
  //     this.showActPromotion = false;
  //     // let personId = uni.getStorageSync("person-id").slice(2) || undefined;
  //     // if (!personId) {
  //     //   personId = "";
  //     // }
  //     wx.reportEvent("home_alert_college_advertise_click", {}); //首页弹窗进入营销页
  //     /* 高中生职途小程序入口AB测试 20240611邹凌风废弃*/ 
  //     // const res = wx.getExptInfoSync(["expt_1716533327"]);
  //     // if (res.expt_1716533327 === undefined) {
  //     //   /* 返回空对象；未命中实验、实验待发布（白名单除外）或者实验结束后会命中该分支 */
  //     //   /* 业务逻辑，可对齐线上 */
  //     //   uni.navigateTo({
  //     //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
  //     //   });
  //     // } else if (res.expt_1716533327 == "0") {
  //     //   /* 对照组业务逻辑 */
  //     //   uni.navigateTo({
  //     //     url: "/pagesSub/careerGrow/careerSearch/index",
  //     //   });
  //     // } else if (res.expt_1716533327 == "1") {
  //     //   /* 实验组1业务逻辑 */
  //     //   uni.navigateTo({
  //     //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
  //     //   });
  //     // } else {
  //     //   /* 异常分支逻辑 */
  //     //   uni.navigateTo({
  //     //     url: "/pagesSub/careerGrow/collegeAdvertise/index",
  //     //   });
  //     // }
  //     uni.navigateTo({
  //         url: "/pagesSub/careerGrow/careerSearch/index",
  //     });
  //   },
  //   // // 数据统计
  //   pointCount(step) {
  //     let eventTitle = step == 1 ? "首页按钮点击" : "首页弹窗点击";
  //     const params = {
  //       personId: this.personId,
  //       platform: "1",
  //       optCode: "aiPromotion",
  //       subOptCode: eventTitle,
  //       optIndex: step,
  //       description: "首页AI面评推广",
  //       moduleType: "demonstrate", // 模块类型(zt:职途，zph：招聘会活动-百职万岗，demonstrate：演示-扎堆)
  //     };
  //   },
  //  // 点击推广弹窗
  //  clickAlert() {
  //     this.showActPromotion = false;
  //     var nowTime = new Date(); //点击以后一天弹一次
  //     uni.setStorage({
  //       key: "userDidClickActCollegeAlertTime",
  //       data: nowTime,
  //       success: function () {},
  //     });
  //     this.pointCount(2);
  //     // this.clickNext();
  //     this.addBuryingPointFn(20067, "", "", "", ""); //点击弹窗
  //     if (this.alertGoods.goodsId == '128317245100125') {
  //       wx.reportEvent("banner_alert_699_click", {});//进入699商品页
  //     } else {
  //       wx.reportEvent("banner_alert_8980_click", {});//进入8980商品页
  //     }
  //     // 跳转进商品详情页
  //     uni.navigateToMiniProgram({
  //       appId: "wx614f8a78fff34162",
  //       path:
  //         "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=" +
  //         this.alertGoods.goodsId,
  //       success(res) {},
  //       fail(err) {},
  //     });
  //   },
  //   closeAlert() {
  //     this.showActPromotion = false;
  //     var nowTime = new Date(); //点击以后一天弹一次
  //     uni.setStorage({
  //       key: "userDidClickActCollegeAlertTime",
  //       data: nowTime,
  //       success: function () {},
  //     });
  //     this.pointCount(2);
  //   },

    // ========
    // ===END===== AI面评推广相关 ======
  },
};
</script>

<style lang="scss">
::v-deep .u-close--top-right {
  top: 5rpx !important;
  right: 5rpx !important;
}
.report {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  .top {
    top: 0;
    width: 100%;
    z-index: 4;
    background: linear-gradient(360deg, #fff 0%, #ffddcc 100%);

    .page-title {
      // margin-bottom: 16rpx;
      padding: 24rpx 40rpx;
      font-size: $uni-font-size-lg;

      &.adviser-title {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tab-item {
        position: relative;
        margin: 0 20rpx;

        &.active {
          font-size: $uni-font-size-sec;
          font-weight: bold;
        }
      }
    }
  }
  .box-bg {
    display: flex;
    align-items: center;
    padding-left: 32rpx;
    background-color: #f4f4f4;
    border-radius: 40rpx;
    transition: left 0.4s;
    transition: top 0.4s;
    margin: 16rpx 32rpx;
    .icon-search {
      width: 48rpx;
      height: 48rpx;
      background-image: url($img-base + "common/search.png");
    }

    .input-view {
      flex-grow: 1;
      position: relative;
      height: 76rpx;
      margin-left: 8rpx;
      padding-right: 20rpx;
    }

    .btn-search {
      width: 126rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 40rpx;
    }
  }
  &.tolower {
    padding: 0;
    height: 0;

    .box-bg {
      top: -80rpx;
    }

    .icon-search-out {
      right: 40rpx;
      transition-delay: 0.2s;
    }
  }
}
.message {
  // padding-top: 32rpx;
  flex: 1;
  background-color: $uni-bg-color;

  ::v-deep {
    .u-btn-text {
      width: 100%;
      text-align: center;
    }
  }

  .msg-list {
    background: $uni-bg-color;
    // border-radius: 24rpx;
    .msg-item {
      position: relative;
      display: flex;
      padding: 36rpx 32rpx 0;
      &.top {
        background-color: #f7f8fa;
      }
      &:first-of-type {
        padding-top: 30rpx;
      }
      &:nth-of-type(n + 2) {
        position: relative;
        // &::before {
        //   content: "";
        //   display: block;
        //   position: absolute;
        //   right: 32rpx;
        //   top: 0;
        //   width: calc(100% - 176rpx);
        //   height: 1rpx;
        //   background: $uni-bg-color-border;
        // }
      }

      .item-avatar {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        margin-right: 24rpx;
        width: 88rpx;
        height: 88rpx;
        image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
        }
      }
      .item-info {
        flex-grow: 1;
        overflow: hidden;
        .info-title {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .name {
            flex-grow: 1;
            margin-right: 24rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: $uni-font-size-lg;
            line-height: $uni-font-size-lg;
            text-shadow: 0 0 0;
            font-weight: bold;
            margin-top: 4rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            .experience {
              width: 68rpx;
              height: 40rpx;
              margin-left: 20rpx;
              background: #e2f4df;
              border-radius: 4rpx;
              display: inline-flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #188f3b;
            }
          }
          .time {
            flex-shrink: 0;
            color: $uni-text-color-888;
            font-size: $uni-font-size-sm;
            line-height: $uni-font-size-sm;
          }

          .tag-role {
            position: relative;
            top: -2rpx;
            display: inline-block;
            margin-left: 8rpx;
            padding: 0 6rpx;
            font-size: 22rpx;
            font-weight: normal;
            color: #888888;
            border: 2rpx solid #999999;
            border-radius: 6rpx;
          }
        }
        .info-cont {
          width: 70vw; // 解决文字内容过长遮挡未读数量
          margin-top: 20rpx;
          padding-bottom: 30rpx;
          height: 70rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          color: $uni-text-color-888;
          font-size: $uni-font-size-base;
          border-bottom: 1rpx solid #f5f5f5;
        }
      }
      .noBorder {
        border: 0 !important;
      }
    }
  }

  .loading {
    padding-top: 100rpx;
    text-align: center;
  }
  .empty {
    padding-top: 200rpx;
    text-align: center;
    &-img {
      display: inline-block;
      width: 378rpx;
      height: 298rpx;
    }
    &-title {
      margin-bottom: $uni-spacing-col-lg;
      font-size: $uni-font-size-lg;
      color: #000;
    }
    &-sub {
      font-size: $uni-font-size-base;
      color: $uni-text-color-666;
    }
  }
}

.need-login {
  margin-top: 100px;
  text-align: center;

  .empty-img {
    display: inline-block;
    margin: 0 auto;
    width: 378rpx;
    height: 298rpx;
  }

  .btn-login {
    margin-top: 100rpx;
    display: inline-block;
    width: 180rpx;
    font-size: 24rpx;
  }
}

.btn-person {
  display: inline-block;
  margin-top: 100rpx;
}
.slot-content {
  padding: 30rpx 44rpx;
  color: #999999;
  line-height: 50rpx;
  font-size: 28rpx;
}
</style>
